<template>
  <!-- :width="dialogConfigRedirect.width" -->
  <v-dialog
    v-model="dialogShow"
    :loading="dialogShow"
    :width="dialogWidth"
    :persistent="dialogConfigRedirect.persistent"
    :transition="dialogConfigRedirect.transition"
    open-delay="100"
  >
    <!-- scrollable -->
    <v-card>
      <v-toolbar color="primary" dark dense>
        <label>{{ dialogConfigRedirect.title }}</label>
        <v-spacer></v-spacer>
        <v-btn icon @click="dialogShow = false">
          <v-icon color=" darken-2">mdi-close</v-icon>
        </v-btn>
      </v-toolbar>
      <v-card-text class="pa-2">
        <form-component ref="formComponent" :form-show="formShow" :form-data="formData" :form-config="formConfig" />
        <!-- :form-options="formOptions"
          :form-item="formItem" -->
      </v-card-text>
      <v-card-actions class="justify-end">
        <v-btn text @click="dialogShow = false">Close</v-btn>
        <v-btn text @click="dialogShow = false">Close</v-btn>
        <v-btn text @click="dialogShow = false">Close</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import { assignObject } from '@/utils/tools'
import FormComponent from '../FormCompoent/FormComponent.vue'
import { mapGetters } from 'vuex'
export default {
  // 弹窗组件
  name: 'DialogComponent',

  components: { FormComponent },

  model: {
    prop: 'dialogConfig',
    event: 'setDialogConfig'
  },

  props: {
    // dialog配置
    dialogConfig: { type: Object, default: () => ({}) },

    // 显示表单
    formShow: { type: Boolean, default: true },
    // 表单数据
    formData: { type: Object, default: () => ({}) },
    // 表单配置
    formConfig: { type: Object, default: () => ({}) }
    // // 表单配置
    // formOptions: { type: Object, default: () => ({}) },
    // // 搜索项配置
    // formItem: { type: Array, default: () => [] }
  },

  data() {
    return {
      dialogConfigRedirect: this.dialogConfig,
      dialogShow: this.dialogConfig.show || false,
      dialogWidth: this.dialogConfig.width
    }
  },

  computed: {
    ...mapGetters(['isPC'])
  },

  watch: {
    'dialogConfig.show': {
      handler(nv) {
        this.dialogShow = nv
      }
    },

    dialogShow(nv) {
      this.dialogConfigRedirect.show = nv
      this.$emit('setDialogConfig', this.dialogConfigRedirect)
      // this.setFormItemLabelWidth()
    },

    isPC(nv) {
      nv ? (this.dialogWidth = this.dialogConfigRedirect.width) : (this.dialogWidth = '100%')
      // nv
      //   ? (this.dialogConfigRedirect.width = this.$options().data.dialogConfigRedirect)
      //   : (this.dialogConfigRedirect.width = '100%')
    }
  },

  created() {
    this.setDialogDefaultAttributes()
  },

  methods: {
    setDialogDefaultAttributes() {
      const defaultAttributes = { transition: 'dialog-bottom-transition', show: false, width: '50%', persistent: true }
      this.dialogConfigRedirect = assignObject(defaultAttributes, this.dialogConfig)
      this.$emit('setDialogConfig', this.dialogConfigRedirect)
    },

    setFormItemLabelWidth() {
      setTimeout(() => {
        console.log(this.$refs.formComponent)
        this.$refs.formComponent.set_LR_LabelWidth('dialog')
      }, 100)
    },

    formCancel() {},

    formSave() {}
  }
}
</script>

<style></style>
